<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="出发" name="1"></el-tab-pane>
      <el-tab-pane label="中期" name="2"></el-tab-pane>
      <el-tab-pane label="总结" name="3"></el-tab-pane>
    </el-tabs>
    <div v-if="activeName == '1' || activeName == '3'">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>内容</span>
        </div>

        <el-date-picker
          clearable
          size="small"
          v-if="activeName == '2'"
          v-model="time"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择时间"
        >
        </el-date-picker>
        <ckeditor v-model="purpose" :config="editorConfig0"></ckeditor>
        <!-- <el-upload
          style="margin-top:10px"
          :action="uploadFileUrl"
          :limit="1"
          :on-exceed="handleExceed"
          :on-change="changeFile"
          :on-remove="removeFile"
          :on-error="handleUploadError"
          :on-success="handleUploadSuccess"
          :on-preview="dowloadFile"
          :file-list="meterialFileList"
        >
          <el-button size="small" type="primary">材料附件上传</el-button>
        </el-upload> -->
        <el-button v-if="meterialFileList" type="text" @click="preview(meterialFileList)">材料附件：{{ meterialFileList }}<span v-if="meterialFileList" @click="openUrl(meterialFileList)"> - 下载</span></el-button>
      </el-card>
    </div>
    <div v-for="(item, index) in midList" v-if="activeName == '2'">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>内容</span>
        </div>

        <el-date-picker
          style="margin-bottom:5px"
          disabled
          clearable
          size="small"
          v-model="item.midtime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择时间"
        >
        </el-date-picker>
        <ckeditor v-model="item.summary" :config="editorConfig0"></ckeditor>
          <el-button v-if="item.fileName2" type="text" @click="preview(item.fileName2)">材料附件：{{ item.fileName2 }}<span v-if="item.fileName2" @click="openUrl(item.fileName2)"> - 下载</span></el-button>
        <!-- 场地审批单:
              <el-upload
                :disabled="type == 2"
                :action="uploadFileUrl"
                :limit="1"
                :on-change="changePlaceImage"
                :on-remove="removePlaceImage"
                :on-error="handleUploadError"
                :on-success="handleUploadSuccess"
                :file-list="placeFileList"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload> -->
      </el-card>
    </div>
    <!-- <el-card class="box-card" v-if="activeName == '2' && cardshow == true">
      <div slot="header" class="clearfix">
        <span>内容</span>
      </div>

      <el-date-picker
        style="margin-bottom:5px"
        clearable
        size="small"
        v-model="time"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择时间"
      >
      </el-date-picker>
      <ckeditor v-model="purpose" :config="editorConfig0"></ckeditor>
      <el-upload
        style="margin-top:10px"
        :action="uploadFileUrl"
        :limit="1"
        :on-exceed="handleExceed"
        :on-change="changeFile"
        :on-remove="removeFile"
        :on-error="handleUploadError"
        :on-success="handleUploadSuccess"
        :file-list="meterialFileList"
      >
        <el-button size="small" type="primary">材料附件上传</el-button>
      </el-upload>
    </el-card> -->

    <!-- <el-button
      style="margin-top: 20px; float: right"
      v-if="isCanWrite"
      type="primary"
      @click="submitForm"
      v-hasPermi="['TeamMidmeterial:midmeterial:add']"
      >提交</el-button> -->
  </div>
</template>

<script>
import { getTeam } from '@/api/eqxm/team';
import {
  listMeterial,
  getMeterial,
  delMeterial,
  addMeterial,
  updateMeterial,
  exportMeterial,
} from '@/api/eqxm/meterial';
import { listMidmeterial } from '@/api/eqxm/midmeterial';
import CommonUtils from '@/utils/CommonUtils';
import CKEditor from 'ckeditor4-vue';
import { mapGetters } from 'vuex';
export default {
  name: 'Meterial',
  components: {
    ckeditor: CKEditor.component,
  },
  computed: {
    ...mapGetters(['roles', 'name']),
  },
  data() {
    return {
      teamInfo: null,
      // 遮罩层
      loading: true,
      cardshow: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 材料上传表格数据
      meterialList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        teamid: null,
        purpose: null,
        midid: null,
        summary: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      teamid: '',
      activeName: '1',
      editorConfig0: {},
      purpose: '',
      id: '',
      time: '',
      midList: [],

      isCanWrite:false,
      uploadFileUrl: process.env.VUE_APP_BASE_API + '/api/images/uploadLocal',
      meterialFile:null,
      meterialFileList:"",
    };
  },
  created() {
    const teamId = CommonUtils.getCurTeamInfo().id;
    this.teamid = teamId;
    this.getTeamInfo();
    this.getList();
  },
  methods: {
    // 获取团队数据
    getTeamInfo() {
      getTeam(this.teamid).then(response => {
        this.teamInfo = response.data;
        console.log(this.teamInfo, 'info');
        this.canWrite();
      });
    },
    canWrite() {
      var isCanWrite = false;
      if (this.teamInfo.createBy == this.name) {
        isCanWrite = true;
      } else if (this.teamInfo.eqxmTeamTeacherList) {
        for (let i = 0; i < this.teamInfo.eqxmTeamTeacherList.length; i++) {
          if (this.teamInfo.eqxmTeamTeacherList[i].username == this.name) {
            isCanWrite = true;
            break;
          }
        }
        if (!isCanWrite && this.teamInfo.eqxmTeamStudentList) {
          for (let i = 0; i < this.teamInfo.eqxmTeamStudentList.length; i++) {
            if (
              this.teamInfo.eqxmTeamStudentList[i].username == this.name &&
              this.teamInfo.eqxmTeamStudentList[i].role == 1
            ) {
              isCanWrite = true;
              break;
            }
          }
          for (let i = 0; i < this.teamInfo.eqxmTeamStudentList.length; i++) {
            if (
              this.teamInfo.eqxmTeamStudentList[i].username == this.name &&
              this.teamInfo.eqxmTeamStudentList[i].role == 2
            ) {
              isCanWrite = true;
              break;
            }
          }
        }
      } else if (this.teamInfo.eqxmTeamStudentList) {
        for (let i = 0; i < this.teamInfo.eqxmTeamStudentList.length; i++) {
          if (
            this.teamInfo.eqxmTeamStudentList[i].username == this.name &&
            this.teamInfo.eqxmTeamStudentList[i].role == 1
          ) {
            isCanWrite = true;
            break;
          }
        }
        for (let i = 0; i < this.teamInfo.eqxmTeamStudentList.length; i++) {
          if (
            this.teamInfo.eqxmTeamStudentList[i].username == this.name &&
            this.teamInfo.eqxmTeamStudentList[i].role == 2
          ) {
            isCanWrite = true;
            break;
          }
        }
      }
      this.isCanWrite = isCanWrite;
      return isCanWrite;
    },
    /** 查询材料上传列表 */
    getList() {
      this.queryParams.teamid = this.teamid;
      this.queryParams.activeName = this.activeName;
      if (this.activeName == '1' || this.activeName == '3') {
        listMeterial(this.queryParams).then(response => {
          console.log(response);
          if (response.length > 0) {
            this.id = response[0].id;
            if (this.activeName == '1') {
              this.purpose = response[0].purpose;
              this.meterialFileList = response[0].fileName1;
            } else if (this.activeName == '3') {
              this.purpose = response[0].summary;
              this.meterialFileList = response[0].fileName3;
            }
          }
        });
      } else {
        this.cardshow = false;
        listMidmeterial(this.queryParams).then(response => {
          console.log(777, response);
          this.meterialFileList = [];
          this.midList = response.rows;
          this.purpose = '';
          this.activeName = '1';
          this.activeName = '2';
          this.cardshow = true;
        });
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        teamid: null,
        purpose: null,
        midid: null,
        summary: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      };
      // this.resetForm('form');
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm');
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = '添加材料上传';
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getMeterial(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = '修改材料上传';
      });
    },
    /** 提交按钮 */
    submitForm() {
      let subForm = {};
      subForm.teamid = this.teamid;
      if (this.activeName == '1') {
        subForm.purpose = this.purpose;
        subForm.fileName1 = this.meterialFile;
      } else if (this.activeName == '3') {
        subForm.summary = this.purpose;
        subForm.fileName3 = this.meterialFile;
      } else if (this.activeName == '2') {
        subForm.createTime = this.time + ' 00:00:00';
        subForm.midid = this.purpose;
        subForm.fileName2 = this.meterialFile;
      }
      if(this.time || this.activeName != '2'){
        updateMeterial(subForm).then(response => {
          if (response.code === 200) {
          this.$modal.msgSuccess('修改成功');
          this.open = false;
          this.getList();
          this.time = '';
          this.purpose = '';
          }
        });
      }else{
        this.$modal.msgError('请选择时间');
      }
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除材料上传编号为"' + ids + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(function () {
          return delMeterial(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess('删除成功');
        });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有材料上传数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(function () {
          return exportMeterial(queryParams);
        })
        .then(response => {
          this.download(response.msg);
        });
    },
    handleClick(tab, event) {
      this.time = '';
      this.purpose = '';
      this.getList();
    },
    changeFile(file, fileList) {
      console.log(file.code,"change");
      if (file.status === 'success') {
        this.meterialFile = file.response.data.url;
        this.meterialFileList = fileList;
      }
    },
    removeFile() {
      this.meterialFile = null;
      this.meterialFileList = [];
    },
    // 文件上传是否成功
    handleUploadSuccess(res) {
      console.log(res, 'resssss');
      if (res.code == 200) {
        this.$modal.msgSuccess('上传成功');
      } else {
        this.$modal.msgError('上传失败');
      }
    },
    handleUploadError(){
      this.$modal.msgError('上传失败');
    },
    // 文件个数超出
    handleExceed() {
      this.$modal.msgError(`数量超出，请先删除原附件!`);
    },
    //预览
    preview(fileName){
      window.open('https://ow365.cn/?i=29710&ssl=1&furl=' + process.env.VUE_APP_BASE_API + fileName)
    },
    // 下载
    openUrl(fileName) {
      window.open(process.env.VUE_APP_BASE_API + fileName);
    },
    dowloadFile(file) {
      console.log(file,"file")
      this.openUrl(file.name)
    }
  },
};
</script>
